<template>
    <div class="pagination_table">
        <div class="table_wrap">
            <el-table
                ref="mutipleTable"
                v-loading="options.loading"
                row-key="id"
                :data="list"
                :stripe="options.stripe"
                :border="options.border"
                :header-cell-class-name="options.headerCellClassName"
                :header-cell-style="options.headerCellStyle"
                :row-style="rowClass"
                @row-click="rowClick"
                @selection-change="handleSelectionChange"
            >
                <!-- 序号 -->
                <el-table-column v-if="options.index" type="index" width="50" label="序号" align="center" />
                <!-- 选择框 -->
                <el-table-column v-if="options.selection" type="selection" width="50" />
                <!--数据列-->
                <template v-for="(column, index) in columns">
                    <el-table-column
                        :key="index"
                        :prop="column.prop"
                        :label="column.label"
                        :align="column.align || 'center'"
                        :width="column.width"
                        :fixed="column.fixed"
                        :sortable="column.sortable"
                    >
                        <template slot-scope="scope">
                            <template v-if="!column.render">
                                <template v-if="column.formatter">
                                    <span v-html="column.formatter(scope.row, column)" />
                                </template>
                                <template v-else>
                                    <span>{{ scope.row[column.prop] }}</span>
                                </template>
                            </template>
                            <!--render-->
                            <template v-else>
                                <expand-dom
                                    :column="column"
                                    :row="scope.row"
                                    :render="column.render"
                                    :index="index"
                                />
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <!-- 按钮操作 -->
                <el-table-column
                    v-if="operates"
                    ref="fixedColumn"
                    label="操作"
                    align="center"
                    :width="operates.width"
                    :fixed="operates.fixed"
                >
                    <template slot-scope="scope">
                        <div class="operate-group">
                            <template v-for="(btn, key) in operates.list">
                                <el-button
                                    v-show="btn.show || true"
                                    :key="key"
                                    :type="btn.type"
                                    :size="btn.size||'mini'"
                                    :icon="btn.icon"
                                    :disabled="btn.disabled || false"
                                    :plain="btn.plain || false"
                                    @click.native.prevent="btn.method(scope.row, key)"
                                >
                                    {{ btn.label }}
                                </el-button>
                            </template>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            v-if="pagination.show"
            :background="pagination.background || false"
            :total="pagination.total"
            :page-size="pagination.pageSize"
            :page-sizes="pageSizes"
            :current-page="pagination.currentPage"
            :pager-count="pagination.pagerCount || 7"
            :layout="layout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<style lang="scss" scoped>
.pagination_table {
    ::v-deep .el-pagination {
        margin-top: 20px;
        text-align: right;
    }
}
</style>

<script>
import Sortable from 'sortablejs'
export default {
    name: 'PaginationTable',
    components: {
        expandDom: {
            functional: true,
            props: {
                row: Object,
                render: Function,
                index: Number,
                column: {
                    type: Object,
                    default: null
                }
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    index: ctx.props.index
                }
                if (ctx.props.column) params.column = ctx.props.column
                return ctx.props.render(h, params)
            }
        }
    },
    props: {
        options: {
            type: Object,
            default: () => {}
        },
        list: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        operates: {
            type: Object,
            default: () => {}
        },
        pagination: {
            type: Object,
            default: () => {}
        },
        getList: Function
    },
    data() {
        return {
            selectRow: [],
            multipleSelection: []
        }
    },
    computed: {
        pageSizes() {
            const { pagination } = this
            if (('pageSizeArr' in  pagination) && pagination.pageSizeArr.length) {
                return pagination.pageSizeArr
            }
            return [8, 10, 15, 20, 25, 50, 100]
        },
        layout() {
            const { pagination } = this
            if (('layout' in pagination)) {
                return pagination.layout
            }
            return 'total, sizes, prev, pager, next, jumper'
        }
    },
    watch: {
        multipleSelection(data) {
            this.selectRow = []
            if (data.length > 0) {
                data.forEach(item => {
                    this.selectRow.push(this.list.indexOf(item))
                })
            }
        }
    },
    created() {
        if (this.options.initTable !== false) {
            this.getList()
        }
        this.$parent.options = Object.assign({
            maxHeight: 640, // 表格 max-height
            initTable: false, // 是否一进来就加载表格数据
            stripe: false, // 是否为斑马纹 table
            loading: true, // 是否添加表格loading加载动画
            mutiSelect: false, // 是否支持列表项选中功能
            index: false,
            border: false, // 是否加边框
            draggable: false, // 是否拖拽
            headerCellClassName: '',
            headerCellStyle: {}
        }, this.options)
    },
    mounted() {
        if (this.options.draggable) {
            this.rowDrop()
        }
    },
    methods: {
        // 行排序
        rowDrop() {
            const tbody = document.querySelector('.el-table__body-wrapper tbody')
            const _this = this
            Sortable.create(tbody, {
                animation: 150, //  拖拽延时
                onEnd({ newIndex, oldIndex }) {
                    if (newIndex === oldIndex) {
                        return
                    }
                    // 判断拖动方向，上or下
                    let oldItem = _this.$parent.list[oldIndex]
                    let newItem = _this.$parent.list[newIndex]
                    const drawDirection = oldIndex > newIndex ? 'top' : 'down'
                    const symbol = oldIndex > newIndex ? 1 : -1
                    const currRow = _this.$parent.list.splice(oldIndex, 1)[0]
                    _this.$parent.list.splice(newIndex, 0, currRow)
                    // 设置修改参数
                    const data = { drawDirection, symbol, currRow, newIndex, oldIndex, newItem, oldItem}
                    _this.$emit('handleDraggableChange', data)
                }
            })
        },
        rowClass({rowIndex}) {
            if (this.selectRow.includes(rowIndex)) {
                return {'background-color': '#F5F7FA'}
            }
        },
        // 点击单行选中
        rowClick(val) {
            if (!this.options.mutiSelect) {
                return
            }
            this.$refs.mutipleTable.toggleRowSelection(val)
        },
        // 多行选中
        handleSelectionChange(val) {
            this.multipleSelection = val
            this.$emit('handleSelectionChange', val)
        },
        // 切换每页显示的数量
        handleSizeChange(size) {
            const { pagination } = this
            pagination.pageSize = size
            this.getList()
        },
        // 切换页码
        handleCurrentChange(current) {
            const { pagination } = this
            pagination.currentPage = current
            this.getList()
        }
    }
}
</script>
